<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title><%= title %></title>

	<% include ../includes/head%>
	<style type="text/css">
			.panel-body{
				padding: 30px 50px 0 50px;

			}
			.form-group{
				margin-bottom: 35px;
			}
			.panel-title{
				font-size: 24px;
				font-weight: bold;
			}
			.message{
	        	position: absolute;
	        	margin-left: 20px;
	        	margin-top: 8px;
	        	display: none
	        }
	        .check{
	        	position: absolute;
	        	margin-left: 100px;
	        	margin-top: -22px;
	        	display: none
	        }
	        .error .message{
				display: block;
				color: red;
	        }
	        
			.err{
				display: block;
				color: red;
			}
		</style>
        <script type="text/javascript">
        $(function(){
	    	$('.panel-body input').focus(function(e){
	    		$(e.target).parent('.form-group').removeClass('error');
	    	})
	    })
	    function checkname(e){
	    	
	    	if(!$('#username').val()){
	    		$('#username').parent('.form-group').addClass('error');
	    		return false
	    	}else{
	    		return true
	    	}
	    }
	    function checkpassword(e){
	    	if(!$('#password').val()){
	    		$('#password').parent('.form-group').addClass('error');
	    		return false;
	    	}else{
	    		return true;
	    	}
	    }
           function login(){
               var username = $('#username').val(),password = $('#password').val();
               var data = { "name": username, "password":password};

               if(checkname() && checkpassword()){
	               $.ajax({
	                   url:'/user/signin',
	                   type:'POST',
	                   data:data,
	                   success:function(data,status){
	                       if(status == 'success'){
	                           location.href='/';
	                       }
	                   },
	                   error:function(data,status){
	                     if(status == "error"){
	                     	$('.check').addClass('err');
	                        
	                     }
	                   }
	               });
           		}
           }
        </script>
</head>
<body>

	


<div class="container web-body" style="margin-top:100px;width: 900px;">

    <div class="row">
        <div class="col-lg-6 col-lg-offset-3">
            <div class="panel panel-default">
                <div class="panel-heading" style="height: 50px;">
                    <div class="panel-title" style="text-align: left">用户登录</div>
                </div>
                <div class="panel-body">
                    <form action="#" class="form-horizontal" role="form" method="post" >
                        <div class="form-group">
                        	
                            <input id="username"  type="text" name="username" class="form-control" onblur="checkname()" placeholder="用户名" />
                            <span class="message">*请输入用户名</span>
                        </div>
                        <div class="form-group">
                        	
                            <input id="password"  type="password" name="password" class="form-control" onblur="checkpassword()" autocomplete="off" placeholder="密码" />
                            <span class="message">*请输入密码</span>
                        </div>
                        <span class="check">用户名或密码错误</span>
                        <div class="form-group">
                            <input type="button" class="btn btn-success btn-block" onclick="login();" value="登 录" />
                            <a href="/register" class="btn btn-primary" style="float: right;margin-top: 20px;">注 册</a>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
	      



	
</body>
</html>
